<!DOCTYPE html>
<html>
	<head>
		<title>Home</title>
		<!--bootstarp-css-->
		<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<!--/bootstarp-css -->
		<!--css-->
		<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
		<link href="../css/hover.css" rel="stylesheet" media="all">
		<!--/css-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Petcare Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/modernizr.custom.js"></script>
		<script src="../js/responsiveslides.min.js"></script>
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script>
			//页面样式js
			$(function() {
				$(".actionChangeType").click(function() {
					$(this).css("background", "#0c8687");
					$(this).css("border", "1px solid #0c8687");
					$(this).css("color", "#Fff");
					$(this).siblings().css("border", "1px solid #0c8687");
					$(this).siblings().css("color", "#0c8687");
					$(this).siblings().css("background", "#fff");
				})
				$(".zl-fisrt").click(function() {
					$("#rq-not").html("拾到");
					$("#dz-not").html("拾到");
					$(".alert-warning").css("display", "block");
					$("#pet_type").val(2);	
					$(".mypets").css("display","none");
					$(".mypetpz").css("display","block");
					
				})
				$(".xc-fisrt").click(function() {
					$("#rq-not").html("丢失");
					$("#dz-not").html("丢失");
					$(".alert-warning").css("display", "none");
					$("#pet_type").val(1);
					$(".mypets").css("display","block");
					$(".mypetpz").css("display","none");
				})
			});
		</script>
		<style>
			#yincan {
				width: 160px;
				height: 110px;
				position: absolute;
				top: 70px;
				right: 46px;
				background-color: #fff;
				display: none;
			}

			.white-bg {
				width: 970px;
				margin: 30px auto 0;
				background: #fff;
				padding: 20px;
			}

			.text-center {
				text-align: center;
			}

			.avatar-box img {
				border: 3px solid #c3cddb;
				margin-bottom: 8px;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				vertical-align: middle;
			}

			.qq-uploader {
				position: relative;
				width: 100%;
			}

			.avatar-box p {
				margin-bottom: 12px;
			}

			.qq-upload-drop-area,
			.qq-upload-extra-drop-area {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				min-height: 30px;
				z-index: 2;
				background: #FF9797;
				text-align: center;
			}

			.qq-upload-button {
				display: block;
				width: 105px;
				padding: 7px 0;
				text-align: center;
				background: none repeat scroll 0 0 #0c8687 !important;
				border-bottom: 1px solid #DDD;
				color: #FFF;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
				direction: ltr;
			}

			.qq-drop-processing {
				display: none;
			}

			.form-wrapper .field-box {
				margin-left: 0;
				float: left;
				width: 100%;
				border-bottom: 1px dashed #eee;
				padding: 10px 0;
				font-size: 14px;
			}

			.btn-flat {
				display: inline-block;
				margin: 0;
				line-height: 15px;
				vertical-align: middle;
				font-size: 12px;
				text-shadow: none;
				color: #0c8687;
				border-radius: 0;
				background: #fff;
				border: 1px solid #0c8687;
				cursor: pointer;
				padding: 7px 14px;
				-webkit-transition: all .1s linear;
				-moz-transition: all .1s linear;
				transition: all .1s linear;
			}

			.btn-flat:hover {
				color: #fff;
				background-color: #0c8687;
				text-decoration: none;
			}

			.xc-fisrt {
				background: #0c8687;
				border: 1px solid #0c8687;
				color: #Fff;
			}

			.alert-warning {
				color: #8a6d3b;
				background-color: #fcf8e3;
				border-color: #faebcc;
				border-radius: 0;
				margin: 10px 0px 0px;
				display: none;
				border: 1px solid transparent;

			}
			.aui-img-round {
				width: 80px;
				height: 80px;	  
				border: 1px #ccc solid;		
				margin-top: -5px;
			}
			.fileInput {
			    height: 80px;
			    position: absolute;
			    top: 35px;
			    bottom: 300px;
			    left:14px;
			    opacity: 0;
			    display: block;
			    width: 80px;
			    clear: both;
			    display: block;
			    margin: auto;
			    background-color: red;
			}
		</style>
	</head>
	<body>
		<!--header-->
		<div class="header">
			<div class="header-info">
				<div class="container">
					<div class="logo">
						<a href="index.html"><img src="../images/logo-pet.png" style="position: absolute;width: 330px;height: 262px;top: -60px;left: 280px;"/></a>
					</div>
					<div class="search-box">
						<form>
							<input type="text" name="s" class="textbox" placeholder="Search" required="">
							<input type="submit" value="">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="header-bottom">
				<div class="menu">
					<span class="menu-info"> </span>
					<ul class="cl-effect-21">
						<li id="oneser"><a id="service" href="index.html" class="active">服务中心</a>
							<div id="yican">
								<div>
									<p><a href="adopt.html">宠物领养</a></p>
									<p><a href="farmed.html">宠物寄养</a></p>
									<p><a href="notice.html">寻宠|招领</a></p>
								</div>
							</div>
						</li>
						<li><a href="petbaike.html">宠物百科</a></li>
						<li><a href="news.html">宠物新闻</a></li>
						<li><a href="bbs.html">宠物论坛</a></li>
						<li><a>关于我们</a></li>
						<li id="twoser">
							<a id="myme">个人中心</a>
							<div id="yincan">
								<div>
									<p><a href="myinfo.html">我的</a></p>
									<p><a id="overpet">注销</a></p>
								</div>
							</div>
						</li>
					</ul>
				</div>

				<!--yican -->
				<script type="text/javascript">
					$("#service").mouseenter(function() {
						$("#yican").css("display", "block");
					});
					$("#oneser").mouseleave(function() {
						$("#yican").css("display", "none");
					});
					$("#myme").mouseenter(function() {
						$("#yincan").css("display", "block");
					});
					$("#twoser").mouseleave(function() {
						$("#yincan").css("display", "none");
					});
					//注销
					$("#overpet").click(function() {
						if (!confirm('是否确定注销该用户并退出登录？'))
							return;
						$.post('http://localhost:80/ct/remove', function(res) {
							if (res) {
								location.href = 'login.html';
							}
						});
					})
				</script>
				<!-- /yican -->
				<!--script-nav -->
				<script>
					$("span.menu-info").click(function() {
						$("ul.cl-effect-21").slideToggle("slow", function() {});
					});
				</script>
				<!-- /script-nav -->
				<div class="clearfix"> </div>
			</div>
		</div>

		<div class="form-page white-container white-bg">
			<span class="label label-warning hidden-xs" style="float: right;margin: 10px 70px 10px 0px;">发布启事</span>
			<div class="form-wrapper clearfix">
				<!-- left column -->
				<div class="column">
					<div class="tab-content" style="padding: 20px 0">
						<form name="savePet" onsubmit="return false">
							<div class="field-box">
								<label class="col-md-2 col-xs-12">发布类型:</label>
								<div class="col-md-10 col-xs-12">
									<input name="pet_type" id="pet_type" type="hidden" value="1">
									<a class="btn-flat actionChangeType xc-fisrt" data-value="dog">寻宠启事</a>
									<a class="btn-flat actionChangeType zl-fisrt" data-value="cat">招领启事</a>
								</div>
							</div>
							<!-- <div class="aui-info">
								<div style="width: 10%;float: left;margin-top: 5px;">选择图片：</div>
								<div style="position: relative;">
									<img src="../images/pet-avatar.png"  id="img-adopt" class="aui-img-round user-img" />
									<input type="file" accept="image/*" id="file-adopt" name="file"
										onchange="upload('#file-adopt', '#img-adopt');" class="fileInput" value="" />
								</div>
							</div> -->
							<div class="field-box">
								<label class="col-md-2 col-xs-12">宠物相片:</label>
								<div class="qq-upload-button"
									style="position: relative; overflow: hidden; direction: ltr;left: -320px;background: transparent !important;border: none;">
									<!-- <div><i class="fa fa-cloud-upload"></i> 上传图片</div> -->
									<div style="position: relative;">
										<img src="../images/pet-avatar.png"  id="img-qs" class="aui-img-round user-img" />
										<input type="file" accept="image/*" id="file-qs" name="file"
											onchange="upload('#file-qs', '#img-qs');" class="fileInput" value="" />
									</div>
									<!-- <input multiple="multiple" type="file" name="qqfile"
										style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"> -->
								</div>
							</div>
							<div class="field-box mypets">
								<label class="col-md-2 col-xs-12">我的宠物:</label>
								<div class="col-md-10 col-xs-12">
									<select id="mypets" class="form-control" style="width: 230px;">
										<option value="0">请选择</option>
									</select>
								</div>
							</div>
							<div class="field-box mypetpz" style="display: none;">
								<label class="col-md-2 col-xs-12">宠物品种:</label>
								<div class="col-md-10 col-xs-12">
									<select id="mypetpz" class="form-control" style="width: 230px;">
										<option value="0">请选择</option>
									</select>
								</div>
							</div>
							<div class="field-box">
								<label class="col-md-2 col-xs-12"><span id="rq-not">丢失</span>日期:</label>
								<div class="col-md-10 col-xs-12">
									<input class="form-control inline-input" id="tydate" name="date-diu" value="" type="text"
										placeholder="" style="width: 40%;">
								</div>
							</div>
							<div class="field-box" style="border-top: 1px solid #f1f2f4; padding-top: 20px;">
								<label class="col-md-2 col-xs-12"><span id="dz-not">丢失</span>地址:</label>
								<div class="col-md-10 col-xs-12">
									<input class="form-control inline-input" id="tyadrs" name="address" value="" type="text"
										placeholder="家庭住址" style="width: 40%;">
								</div>
							</div>
							<div class="field-box" style="border-top: 1px solid #f1f2f4; padding-top: 20px;">
								<label class="col-md-2 col-xs-12">联系电话:</label>
								<div class="col-md-10 col-xs-12">
									<input class="form-control inline-input" id="typhone" name="phone" value="" type="text"
										style="width: 40%;">
								</div>
							</div>
							<div class="field-box" style="border-top: 1px solid #f1f2f4; padding-top: 20px;">
								<label class="col-md-2 col-xs-12">标题:</label>
								<div class="col-md-10 col-xs-12">
									<input class="form-control inline-input" id="tytitle" name="title" value="" type="text"
										style="width: 40%;">
								</div>
							</div>
							<div class="field-box">
								<label class="col-md-2 col-xs-12">详情描述:</label>
								<div class="col-md-10 col-xs-12">
									<textarea rows="4" name="content" id="tydetail" class="form-control" placeholder=""></textarea>
									<div class="alert alert-warning" id="find_notice" style="margin: 10px 0px 0px;">
										<p>如果是招领启事，宠物描述不宜太过详尽，保留宠物配件，拾到时间等信息，需跟失主再次确认。</p>
									</div>
								</div>
							</div>
							<div class="field-box">
								<label class="col-md-2 col-xs-12">&nbsp;</label>
								<div class="col-md-10 col-xs-12">
									<input type="hidden" name="successUri" value="https://www.bagong.cn/user/mypet/">
									<button type="submit" id="addqs" class="btn btn-danger btn-lg "
										style="outline: none;width: 150px;"> 保 存 </button>
								</div>
							</div>

							<!-- Modal -->
							<div class="modal fade" id="bdmapbox" tabindex="-1" role="dialog"
								aria-labelledby="messagetitle" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">×</button>
											<h4 class="modal-title" id="myModalLabel">标注地址</h4>
										</div>
										<div class="modal-body">

											<div class="field-box" style="margin: 10px 0;">
												<div class="row">
													<div class="col-sm-5">
														<input id="searchzone-keywords"
															class="form-control inline-input" value=""
															placeholder="输入详细地址辅助定位">
													</div>
													<div class="col-sm-5">
														<a id="searchzone-button" class="btn btn-default"
															href="javascript:void(0)">定位</a>
													</div>
												</div>
											</div>

											<div id="baidu_map" style="width: 100%; height: 300px; margin: 10px 0;">
											</div>
											<input type="hidden" name="location" id="location" value="">
											<input type="hidden" name="province" id="province" value="">
											<input type="hidden" name="city" id="city" value="">
											<input type="hidden" name="district" id="district" value="">
										</div>
										<div class="modal-footer no-margin">
											<button type="button" class="btn btn-success"
												data-dismiss="modal">保存标注</button>
										</div>
									</div><!-- /.modal-content -->
								</div><!-- /.modal-dialog -->
							</div><!-- /.modal -->

						</form>
					</div>
				</div>
			</div>
		</div>

		<!--/header-->

		<!--footer-->
		<div class="footer">
			<div class="container">
				<div class="copy-rights">
					<p>Copyright &copy; 2023.Company <a target="_blank" href="index.html">you宠</a></p>
				</div>

			</div>
		</div>
		<!--/footer-->
		<script type="text/javascript">
			$(function(){	
				//我的宠物
				mypet();
				function mypet(){
					$.post('http://localhost:80/ct/mypetinfo2',{"status":0},function(r){
						$("#mypets").children().first().siblings().remove();
						$(r.records).each(function(i,e){
							let ops = "<option value='"+e.upid+"'>"+e.upname+"</option>";
							$("#mypets").append(ops);
						});
					},"json");
				}
				//宠物品种
				mypetpz();
				function mypetpz(){
					$.post('http://localhost:80/ct/petpz',{"status":0},function(r){
						$("#mypetpz").children().first().siblings().remove();
						$(r).each(function(i,e){
							let ops = "<option value='"+e.bid+"'>"+e.bname+"</option>";
							$("#mypetpz").append(ops);
						});
					},"json");
				}
				
				//我的基本信息
				myinfo();
				function myinfo(){
					$.post('http://localhost:80/ct/userdetail',{'uid':0},function(r){
						$("#typhone").val(r.phone);
						$("#tyadrs").val(r.faddress);
					},"json");
				}
				
				//添加寻宠或招领
				$("#addqs").click(function(event) {
					event.preventDefault(); //阻止表单提交	
					let type = $("#pet_type").val();
					if ($("#tydate").val() == '' || $("#typhone").val() == '' || $("#tyadrs").val() == '' || $("#tydetail").val() =='' || $("#tytitle").val() == '') {
						alert("添加信息不能为空！");
						return;
					}
					//手机格式验证
					var telStr = /^[1]([3-9])[0-9]{9}$/;
					if (!(telStr.test($("#typhone").val()))) {
						alert("手机格式不规范！");
						return;
					}											
					var formData = new FormData();
					formData.append("date", $("#tydate").val());
					formData.append("phone", $("#typhone").val());
					formData.append("adrs", $("#tyadrs").val());
					formData.append("detail", $("#tydetail").val());
					formData.append("title", $("#tytitle").val());
					let f = document.getElementById('file-qs');
					let f1 = f.files[0];
					formData.append("files", f1);
					//寻宠
					if(type == 1 || type =="1"){
						formData.append("upid", $("#mypets").val());	
						if($("#mypets").val() == 0){
							alert("添加信息不能为空！");
							return;
						}			
						$.ajax({
							url: 'http://localhost:80/ct/addseek',
							type: 'post',
							data: formData,
							contentType: false,
							processData: false,
							success: function(res) {
								console.log(res);
								if (res) {
									alert("添加成功！");
								} else {
									alert("添加失败！");
								}
								location.href = 'notice.html';
							}
						})
					}
					//招领
					if(type == 2 || type =="2"){
						if($("#mypetpz").val() == 0){
							alert("添加信息不能为空！");
							return;
						}
						formData.append("bid", $("#mypetpz").val());				
						$.ajax({
							url: 'http://localhost:80/ct/addfound',
							type: 'post',
							data: formData,
							contentType: false,
							processData: false,
							success: function(res) {
								console.log(res);
								if (res) {
									alert("添加成功！");
								} else {
									alert("添加失败！");
								}
								location.href = 'notice.html';
							}
						})
					}
				
				})
								
			})
		</script>
		<!-- 图片预览 -->
		<script type="text/javascript">
			var upload = function(c, d) {
				"use strict";
				var $c = document.querySelector(c),
					$d = document.querySelector(d),
					file = $c.files[0],
					reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					$d.setAttribute("src", e.target.result);
				};
			};
		</script>
	</body>
</html>